<template>
	<div>
		<div class="bigs">
			<div class="logo-box" @click="indexClick()">
				<img class="icon-logo" src="../../assets/pc/logo.png" />
				<div class="logo-txt">电商客服</div>
				<div class="logo-ai">AI</div>
			</div>
			<div class="lefts">
				<img src="../../assets/pc/loginIcon.png" class="liftImg" />
			</div>
			<div class="login-box">

				<img class="img-chose-option" src="../../assets/pc/wxLogo.png" @click="wxOrPwdClick"
					v-if="wxLoginShow" />
				<img class="img-chose-option" src="../../assets/pc/pwd.png" @click="wxOrPwdClick" v-else />

				<div class="phone-login-opion">{{ wxLoginShow ? '扫码登陆' : '手机号登陆' }}</div>
				<div class="phone-login-line"></div>
				<div class="form-box display-center" v-if="wxLoginShow == true">
					<div class="code-option">
						<div style="margin-top: 80px;">
							<wxlogin v-if="appid" :key="iframeKey" :appid="appid" :scope="'snsapi_login'"
								:theme="'black'" :redirect_uri="encodeURIComponent('https://www.feeshine.com/login')"
								:href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLC5pbmZvIHsKICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7CiAgdmlzaWJpbGl0eTogaGlkZGVuICFpbXBvcnRhbnQ7CiAgaGVpZ2h0OiAwICFpbXBvcnRhbnQ7CiAgbWFyZ2luOiAwICFpbXBvcnRhbnQ7CiAgcGFkZGluZzogMCAhaW1wb3J0YW50OwogIG92ZXJmbG93OiBoaWRkZW4gIWltcG9ydGFudDsKfQouaW1wb3dlckJveCAucXJjb2RlIHsKICB3aWR0aDogMjI1cHg7CiAgaGVpZ2h0OiAyMjVweDsKfQ=='">
							</wxlogin>
						</div>
					</div>
					<div class="wx-hint-option">请使用微信扫码饷学平台</div>
					<div class="hint-option">新用户扫码上方二维码进行注册登陆!</div>
					<div class="hint-option-zhu-ce cursor-pointer" @click="regOpenDialog">立即注册!</div>
				</div>
				<div class="form-box" v-if="wxLoginShow == false">
					<el-form ref="registerForm" :model="registerForm" :rules="loginRules">

						<el-form-item prop="username" class="form-option">
							<div class="label-txt">账号</div>
							<div class="input-option">
								<el-input v-model="registerForm.username" placeholder="请输入账号"
									class="input-phone-class"></el-input>
							</div>
						</el-form-item>

						<!-- <div class="form-option"> -->
						<el-form-item prop="password" class="form-option">

							<div class="label-txt">密码</div>
							<div class="input-option">

								<el-input v-model="registerForm.password" type="password" placeholder="请输入密码"
									class="input-phone-class"></el-input>

							</div>
							<!-- </div> -->
						</el-form-item>
						<div class="form-option">
							<div class="label-txt">验证码</div>
							<div class="input-option">
								<el-input v-model="registerForm.code" placeholder="请输入验证码"
									class="input-phone-class"></el-input>
								<img class="btn" :src="codeUrl" @click="getCodeImg" />
							</div>
						</div>
						<div class="pwd-option">
							<div class="login-txt"> <el-checkbox v-model="registerForm.rememberMe">
								</el-checkbox><span>记住密码</span>
							</div>
							<div class="login-txt" @click="regOpenDialog">立即注册
							</div>
						</div>
						<div class="login-btn" :class="isLoginBtn ? 'btn-check' : ''" @click="handleRegister">{{
							!loginBtnLoading ? '登陆' : '登陆中...' }}</div>
					</el-form>
				</div>
			</div>
		</div>

		<el-dialog :visible.sync="dialogVisibleneedreg" width="40%" :show-close="false" :close-on-click-modal="false"
			top="10%">
			<template #title>
				<div class="dialog-title-bar">
					<div class="title-left">
						<div class="title-main">用户注册</div>
						<div class="title-sub">首次注册请填写相关资料</div>
					</div>
				</div>
			</template>
			<el-form ref="ruleForm" :model="formreg" :rules="rulesReg">
				<!-- 扫码注册 -->
				<el-form-item prop="nickName" v-if="pcisShow == '1'">
					<el-input v-model="formreg.nickName" type="text" placeholder="真实姓名"
						style="width: 100%; font-size: 16px">
					</el-input>
				</el-form-item>

				<el-form-item prop="phoneNumber">
					<el-input v-model="formreg.phoneNumber" type="text" placeholder="登录手机号"
						style="width: 100%; font-size: 16px">
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="formreg.password" type="password" placeholder="账号密码"
						style="width: 100%; font-size: 16px">
					</el-input>
				</el-form-item>
				<el-form-item prop="code">
					<div class="reg_yzm">
						<div class="reg_yzm_left">
							<el-input v-model="formreg.code" placeholder="短信验证码" style="width: 100%; font-size: 16px">
							</el-input>
						</div>
						<div>
							<el-button class="loginBtn2" @click="getPhoneCode2" :disabled="codeButtonDisable">
								{{ this.codeText }}
							</el-button>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<div class="bom_text" style="font-size: 14px" v-if="falg == 2">
				<el-checkbox v-model="formadd.licenseFlag" true-label="1" false-label="0"></el-checkbox>
				您己阅读并同意
				<span id="a1 " type="primary" class="agreement span-class" style="font-size: 14px">《智通星辰用户许可协议》</span>
				<span id="a2" type="primary" class="agreement span-class" style="font-size: 14px">《肥饷用户许可协议》</span>
				，并授权肥饷使用该账号信息进行统一管理
			</div>
			<div class="bom_text" style="font-size: 14px" v-else>
				<el-checkbox v-model="formadd.licenseFlag" true-label="1" false-label="0"></el-checkbox>
				您己阅读并同意
				<span id="a2" type="primary" class="agreement  span-class" style="font-size: 14px">《肥饷用户许可协议》</span>
				<span id="a3" type="primary" class="agreement  span-class" style="font-size: 14px">
					<span>《肥饷平台隐私协议》</span>
				</span>
				<span id="a4" type="primary" class="agreement  span-class" style="font-size: 14px">
					<span>《肥饷平台保密协议》</span>
				</span>
				<span id="a5" type="primary" class="agreement  span-class" style="font-size: 14px">
					<span>《个人众包任务承揽许可协议》</span>
				</span>
				，并授权肥饷使用该账号信息进行统一管理
			</div>
			<div class="login_dialog-footer">
				<div class="btnclose cursor-pointer" @click="dialogVisibleneedreg = false">
					取 消
				</div>
				<div class="btnNext cursor-pointer" @click="registerClick()">确定</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			iframeKey: Date.now(),
			appid: "wx908cc74fdc80dfc0",
			isChecked: false,
			wxLoginShow: false,//账号密码或微信扫码登陆
			inputNumber: '',
			codeOne: 4,
			codeTwo: 2,
			codeButtonDisable: false,
			registerForm: {
				username: "",
				password: "",
				rememberMe: false,
				code: "",
				uuid: "",
			},
			pcisShow: 1,
			dialogVisibleneedreg: false,
			codeUrl: "",
			loginRules: {
				username: [
					{ required: true, trigger: "blur", message: "用户名不能为空" }
				],
				password: [
					{ required: true, trigger: "blur", message: "密码不能为空" }
				],
				code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
			},
			formreg: {
				nickName: "",
				realName: null,
				loginType: 0,
				phoneNumber: "",
				confirmPassword: null,
				code: ""
			}, // 注册
			codeText: "获取验证码",
			falg: '',
			formadd: { licenseFlag: false },
			rulesReg: {
				realName: [
					{ required: true, trigger: "blur", message: "真实姓名不能为空" }
				],
				nickName: [
					{ required: true, trigger: "blur", message: "真实姓名不能为空" }
				],
				phoneNumber: [
					{ required: true, trigger: "blur", message: "手机号不能为空" }
				],
				password: [
					{ required: true, trigger: "blur", message: "账号密码不能为空" }
				],
				code: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
			},
			loginBtnLoading: false,
		}
	},
	mounted() {
		setInterval(() => {
			this.iframeKey = Date.now()
		}, 300000) // 每5分钟刷新一次
		this.getCodeImg()
		this.needAppid()
	},
	watch: {
		$route: {
			handler: function (route) {
				this.init()
				this.redirect = route.query && route.query.redirect
			},
			immediate: true
		}
	},
	computed: {
		isLoginBtn() {

			if (this.registerForm.username && this.registerForm.password && this.registerForm.code) {
				console.log("1====")
				return true
			} else {
				console.log("2====")
				return false
			}
		}
	},
	methods: {
		init() {
			if (this.$route.query.code) {
				const code = this.$route.query.code || null
				// const code = "001XJkGa1C9nBE0D8ZGa1fyv1d1XJkGm"
				this.formreg.wxCode = code
				// this.loginwx(code)
				console.log("微信扫码进来了", this.$route.query.code)
				if (this.formreg.wxCode) {
					// 已扫码
					console.log("已扫码!")
					this.pcisShow = "1"
				}
			}
		},
		handleRegister() {
			this.$refs.registerForm.validate((valid) => {
				console.log("valid", valid)
				if (valid) {
					this.userInRevoked()//检测用户是否已经注销
				}
			})
		},
		userInRevoked() {
			this.loginBtnLoading = true
			// 判断手机号是否已经注销
			const parmsLog = {
				numberPhone: this.registerForm.username
			}
			this.$http({
				url: this.$http.adornUrl(`/platform/Revoked/getUserInRevoked`),
				method: 'get',
				params: parmsLog
			}).then(({ data }) => {
				if (data.code == 200) {
					//正常使用
					this.signIn(this.registerForm)
				} else {
					this.loginBtnLoading = false
					this.$message({
						message: data.msg,
						center: true,
						type: "success"
					})
				}
			})
		},
		//用户登陆
		signIn(form) {
			this.$http({
				url: this.$http.adornUrl(`/auth/login`),
				method: 'post',
				data: form
			}).then(({ data }) => {
				if (data.code == 200) {
					//登陆成功 获取用户信息
					localStorage.setItem('Authorization', data.data.access_token)
					this.wechatUserInformationFn()
					this.loginBtnLoading = false
				} else {
					this.loginBtnLoading = false
					this.$message({
						message: data.msg,
						center: true,
						type: "success"
					})
				}
			})
		},
		//获取用户信息
		wechatUserInformationFn() {
			this.$http({
				url: this.$http.adornUrl(`/platform/wechatUser/wechatUserInformation`),
				method: 'get',
			}).then(({ data }) => {
				if (data.code == 200) {
					//获取用户信息
					let userInfo = {
						avatar: data.data.avatar,
						userId: data.data.userId,
						nickName: data.data.nickName,
						customerType: data.data.customerType,
						supplierId: data.data.supplierId,
						mobile: data.data.mobile,
					}
					localStorage.setItem('userInfo', JSON.stringify(userInfo))
					this.$router.push({
						path: '/'
					})
					location.reload();
				} else {
					this.$message({
						message: data.msg,
						center: true,
						type: "success"
					})
				}
			})
		},
		//获取微信id
		needAppid() {
			this.$http({
				url: this.$http.adornUrl(`/auth/wechatScanQRCode/appid`),
				method: 'get',
			}).then(({ data }) => {
				if (data.code == 500) {
					this.appid = data.data
					console.log("this.appid--", this.appid)
				} else {

				}
			})
		},
		//获取图形验证码
		getCodeImg() {
			this.$http({
				url: this.$http.adornUrl('code'),
				method: 'get',
			}).then(({ data }) => {
				console.log('data---', data)
				if (data.code == 200) {
					this.registerForm.uuid = data.uuid
					this.codeUrl = "data:image/gif;base64," + data.img
				}
			})
		},
		indexClick() {
			this.$router.push({
				path: '/'
			})
		},
		wxOrPwdClick() {
			// this.wxLoginShow = !this.wxLoginShow
		},
		regOpenDialog() {
			this.dialogVisibleneedreg = true
		},
		getPhoneCode2() {
			console.log("jinal", this.formreg.phoneNumber)
			if (this.formreg.phoneNumber == "") {
				this.$message.error("手机号不能为空!")
				return
			}
			this.$http({
				url: this.$http.adornUrl(`/sendCode?phoneNumber=${this.formreg.phoneNumber}&status=1`),
				method: 'get',
			}).then(({ data }) => {
				console.log('data---', data)
				if (data.code == 200) {
					this.codeButtonDisable = true
					this.changeCodeText()
				} else {
					this.$message({
						message: data.msg,
						center: true,
						type: "success"
					})
				}
			})
		},
		//倒计时
		changeCodeText() {
			var idx = 60
			this.intervalId = setInterval(() => {
				idx -= 1
				if (idx <= 0) {
					this.codeButtonDisable = false
					this.codeText = "发送验证码"
					clearInterval(this.intervalId)
					return
				}

				if (idx < 60) {
					this.codeButtonDisable = true
					this.codeText = "发送验证码" + idx
					return
				}
			}, 1000)
		},
		//注册用户
		registerClick() {

			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					if (!this.formadd.licenseFlag) {
						this.$message({
							message: '请阅读用户许可协议并勾选',
							center: true,
							type: "error"
						})
						return
					}
					this.$http({
						url: this.$http.adornUrl(`/auth/register`),
						method: 'post',
						data: {
							...this.formreg,
							confirmPassword: this.formreg.password
						}
					}).then(({ data }) => {
						this.dialogVisibleneedreg = false
						if (data.code == 200) {
							var token = data.data.access_token
							localStorage.setItem('Authorization', data.data.access_token)
							this.wechatUserInformationFn()
						} else {
							this.$message({
								message: data.msg,
								center: true,
								type: "error"
							})
						}
					})
				}

			})

		},
	}
}
</script>

<style scoped="scoped" lang="scss">
.bigs {
	position: relative;
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: 100% 100vh;
	background-image: url('../../assets/pc/bg.png');
}

.logo-box {
	position: absolute;
	top: 2vh;
	left: 12vw;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 111;

	.icon-logo {
		width: 45px;
		height: 45px;
	}

	.logo-txt {
		margin-left: 16px;
		margin-left: 18px;
		font-size: 30px;
		font-weight: 700;
	}

	.logo-ai {
		margin-left: 16px;
		width: 45px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		border-top-left-radius: 7px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		background: #C9E8FF;
		font-size: 16px;
		font-weight: 700;
		color: rgba(37, 158, 250, 1);
	}
}


.lefts {
	width: 59vw;
	height: 100vh;
	box-sizing: border-box;
	position: relative;
}

.liftImg {
	width: 38vw;
	position: absolute;
	top: 20vh;
	left: 0;
	right: 0;
	margin: auto;
}

.login-box {
	.hint-option-zhu-ce {
		font-size: 26px;
		color: #259efa;
		margin-top: 6px;
	}

	position: absolute;
	background: #fff;
	top: 18vh;
	z-index: 111;
	right: 10vw;
	border: 1px solid rgba(220, 224, 230, 1);
	border-radius: 14px;
	box-shadow: 18px 10px 20px rgba(51, 119, 255, 0.05);
	padding: 2vw 3vw;


	.img-chose-option {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 80px;
		height: 70px;
	}

	.phone-login-opion {
		font-size: 28px;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 40.54px;
		color: rgba(56, 56, 56, 1);
	}

	.phone-login-line {
		margin-top: 14px;
		width: 23px;
		height: 2px;
		background: rgba(56, 56, 56, 1);
	}

	.form-box {
		margin-top: 42px;

		.form-option {
			margin-bottom: 23px;

			.label-txt {
				font-size: 16px;
				font-weight: 500;
				color: rgba(56, 56, 56, 1);
			}

			.input-option {
				margin-top: 14px;
				display: flex;
				align-items: center;

				.btn {
					margin-left: 13px;
					width: 151px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					border-radius: 4px;
					background: rgba(217, 225, 236, 1);
					font-size: 16px;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
		}
	}

	.pwd-option {
		margin-top: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);

		.login-txt {
			display: flex;
			align-items: center;

			span {
				margin-left: 12px;
			}
		}
	}

	.login-btn {
		margin-top: 40px;
		height: 48px;
		line-height: 48px;
		text-align: center;
		border-radius: 4px;
		background: rgba(204, 204, 204, 1);
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.btn-check {
		background-color: #1374e6;
		color: #fff;
	}

	.display-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.flex-center {
		display: flex;
		align-items: center;
	}

	.code-option {
		width: 260px;
		margin-left: 94px;
		margin-right: 94px;
		height: 260px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wx-hint-option {
		border-radius: 8px;
		padding: 12px 18px;
		font-size: 12px;
		display: inline-block;
		background: #e9edef;
		color: #535353;
		margin-left: auto;
		margin-right: auto;
	}

	.hint-option {
		margin-top: 12px;
		color: #535353;
		font-size: 12px;
	}
}

@media screen and (max-width: 991px) {}

@media screen and (max-width: 767px) {}

@media screen and (max-width: 480px) {
	/deep/ .el-dialog {
		width: 100% !important;
	}

	.logo-box {
		cursor: pointer;
		z-index: 111;
		position: absolute;
		top: 2vh;
		left: 6vw;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon-logo {
			width: 35px;
			height: 35px;
		}

		.logo-txt {
			margin-left: 16px;
			margin-left: 18px;
			font-size: 24px;
			font-weight: 700;
		}

		.logo-ai {
			margin-left: 16px;
			width: 42px;
			height: 23px;
			line-height: 23px;
			text-align: center;
			border-top-left-radius: 7px;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			background: #C9E8FF;
			font-size: 13px;
			font-weight: 700;
			color: rgba(37, 158, 250, 1);
		}
	}


	.login-box {
		position: absolute;
		background: #fff;
		top: 18vh;
		z-index: 111;
		left: 24px;
		right: 24px;
		border: 1px solid rgba(220, 224, 230, 1);
		border-radius: 14px;
		box-shadow: 18px 10px 20px rgba(51, 119, 255, 0.05);


		.img-chose-option {
			position: absolute;
			right: 20px;
			top: 20px;
			width: 60px;
			height: 50px;
		}

		.phone-login-opion {
			font-size: 20px;
			font-weight: 700;
			color: rgba(56, 56, 56, 1);
		}

		.phone-login-line {
			margin-top: 9px;
			width: 23px;
			height: 2px;
			background: rgba(56, 56, 56, 1);
		}

		.form-box {
			margin-top: 42px;

			.form-option {
				margin-bottom: 23px;

				.label-txt {
					font-size: 16px;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.input-option {
					margin-top: 14px;
					display: flex;
					align-items: center;

					.btn {
						margin-left: 13px;
						width: 151px;
						height: 40px;
						line-height: 40px;
						text-align: center;
						border-radius: 4px;
						background: rgba(217, 225, 236, 1);
						font-size: 16px;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
				}
			}
		}

		.pwd-option {
			margin-top: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 400;
			color: rgba(56, 56, 56, 1);

			.login-txt {
				display: flex;
				align-items: center;

				span {
					margin-left: 12px;
				}
			}
		}

		.login-btn {
			margin-top: 40px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			border-radius: 4px;
			background: rgba(204, 204, 204, 1);
			font-size: 14px;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.btn-check {
			background-color: #1374e6;
			color: #fff;
		}

		.display-center {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.flex-center {
			display: flex;
			align-items: center;
		}

		.code-option {
			width: 260px;
			margin-left: 94px;
			margin-right: 94px;
			height: 160px;
			border-radius: 6px;
			background: skyblue;
		}

		.wx-hint-option {
			border-radius: 8px;
			padding: 12px 18px;
			font-size: 12px;
			display: inline-block;
			background: #e9edef;
			color: #535353;
			margin-left: auto;
			margin-right: auto;
		}

		.hint-option {
			margin-top: 12px;
			color: #535353;
			font-size: 12px;
		}
	}
}


.dialog-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
}

.title-left {
	display: flex;
	flex-direction: column;
}

.title-main {
	font-size: 26px;
	font-weight: 700;
	color: rgba(56, 56, 56, 1);
}

.title-sub {
	font-size: 18px;
	font-weight: 400;
	color: rgba(140, 135, 90, 1);
	margin-top: 4px;
}

.title-icon img {
	width: 73px;
	height: 74px;
}

//
.isLoginBox {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.inleTit {
	opacity: 1;
	border-radius: 2px;
	background: rgba(237, 240, 242, 1);
	width: 230px;
	height: 35px;
	color: #6a6868;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	font-size: 16px;
}

.inleTit2 {
	color: #6a6868;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	font-size: 16px;
}

.font_code {
	font-weight: bold;
	text-align: center;
	color: #fae100;
	cursor: pointer;
	margin-top: 10px;
	font-size: 22px;
}

.bjBoxcolor {}

.bjBox {
	margin: 0 auto;
	max-width: 1920px;
}

.reg_yzm {
	display: flex;
	justify-content: space-between;
}

.reg_yzm_left {
	flex: 1;
	margin-right: 16px;
}

.login_dialog-footer {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;

	.btnclose {
		border-radius: 6px;
		padding: 12px 56px;
		background: #efefef;
	}

	.btnNext {
		border-radius: 6px;
		padding: 12px 56px;
		color: #fff;
		background: #259efa;
	}
}

.span-class {
	color: #259efa;
}

.impowerBox .qrcode {
	width: 260px !important;
	height: 260px !important;
	margin-top: 55px !important;
}
</style>
